<template>
  <view>
    <cu-custom bgColor="bg-gradual-green" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">FMS测试详情</block>
    </cu-custom>

    <view class="header u-f-ajc u-f-column">
      <view class="headers u-f-ajc u-f-column">
        <view class="avatars u-f-ajc text-overflow">
          {{ user.nickName || user.username }}
        </view>
        <view class="names">
          {{ user.nickName || user.username }}
        </view>
      </view>
      <view class="ucharts"></view>
      <view class="count_scores u-f-ajc">总分{{countScores}}</view>
    </view>

    <view>
      <view class="fms_list">
        <view v-for="(item, index) in datas" :key="index">
          <view class="fms_item u-f-ac u-f-jsb" @click="toggleIsShow(index)">
            <view>{{item.name}}</view>
            <view>{{item.scores}}分<text :class="item.isShow ? 'cuIcon-unfold'  : 'cuIcon-right'" style="margin-left: 20rpx;color: #999;"></text></view>
          </view>
          <view class="show_item" v-if="item.isShow">
            <view v-if="item.input2 == null">评分：{{item.input1}}分</view>
            <view v-else>左侧评分：{{item.input1}}分 <text style="margin: 0 20rpx;">|</text> 右侧评分：{{item.input2}}分</view>
            <view style="margin: 30rpx 0;">评论：{{item.remark}}</view>
            <view style="width: 120rpx;height: 120rpx;" v-if="item.picUrl">
              <image :src="'https://jxjsservice.jxfit.cn/file'+item.picUrl" style="width: 100%;height: 100%;" />
            </view>
          </view>
        </view>
      </view>
      
      <view class="remarks">
        <view class="titles">总体评价</view>
        <view>{{remark}}</view>
      </view>
      
      <view class="poster_title2 u-f-ac">
        <view class="avatars u-f-ajc text-overflow" style="margin: 0 20rpx 0 0;">
          {{ datass.userName }}
        </view>
        <view>{{datass.userName}}</view>
      </view>
    </view>





  </view>
</template>

<script>
  export default {
    data() {
      return {
        user: uni.getStorageSync('phyUser'),
        datass: {},
        datas: [],
        countScores: '',
        remark: '',
      };
    },
    onLoad: function(e) {
      this.getData(e.id)
    },

    methods: {
      comput(input1, input2) {
        if (input2) { // 如果第二项存在
          if (input1 > input2) return input2 // 如果第一项比二项大的话 返回第二项
          else return input1 // 否则返回第一项
        } else { // 不存在返回第一项
          return input1
        }
      },
      toggleIsShow(index) {
        this.datas[index].isShow = !this.datas[index].isShow
      },
      async getData(FMSId) {
        let {
          data: {
            datas
          }
        } = await this.$myRuquest({
          url: "/coach/body/getFMSTestVOById",
          data: {
            FMSId,
          }
        })
        this.datass = datas;
        this.countScores = datas.countScores;
        this.remark = datas.countRemark;
        let objs = (names) => {
          let obj = {
            name: datas[names].name,
            input1: datas[names].leftScores,
            input2: datas[names].rightScores,
            remark: datas[names].remark,
            picUrl: datas[names].veido,
            scores: this.comput(datas[names].leftScores, datas[names].rightScores),
            isShow: false,
          }
          this.datas.push(obj)
        }
        objs('squat');
        objs('stepOverTheRailings');
        objs('shouldersAreFlexible');
        objs('liftLegsOnKnees');
        objs('torsoStabilityPushUps');
        objs('rotationalStability');
        objs('squatOnBackAndForth');

        console.log('查看数组', this.datas)
      },
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #4B505F !important;
    color: #FFFFFF;
  }

  .header {
    width: 94%;
    margin: 0 auto;
    padding: 80rpx 0 30rpx;
    border-bottom: 1px solid #444;
  }

  .headers {
    width: 100%;
    margin-bottom: 30rpx;
  }
  .avatars {
    width: 120rpx;
    height: 120rpx;
    background-color: $uni-color-zhuti;
    border-radius: 100%;
    margin-bottom: 20rpx;
  }

  .ucharts {
    width: 100%;
    height: 300rpx;
  }

  .count_scores {
    width: 150rpx;
    padding: 10rpx 0;
    border-radius: 30rpx;
    background-color: $uni-color-zhuti;
  }

  .fms_list {
    padding: 30rpx 0 0;

    .fms_item {
      padding: 0 3%;
      margin-bottom: 50rpx;
      font-size: 24rpx;
    }

    .show_item {
      padding: 20rpx;
      background-color: #3F4551;
      margin-bottom: 50rpx;
    }
  }
  
  .remarks {
    width: 94%;
    margin: 0 auto;
    background-color: #3F4551;
    padding: 20rpx 30rpx;
    .titles {
      margin-bottom: 20rpx;
    }
    .titles::before {
      content: '';
      display: inline-block;
      width: 10rpx;
      height: 16rpx;
      background-color: $uni-color-zhuti;
      margin-right: 10rpx;
    }
  }
  .poster_title2 {
    width: 100%;
    height: 100rpx;
    padding: 0 20rpx;
    margin: 30rpx 0;
  
    >view:first-of-type {
      width: 70rpx;
      height: 70rpx;
      overflow: hidden;
      border-radius: 100%;
      margin-right: 20rpx;
  
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
</style>
